<template>
  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" icon="CirclePlus" @click="add">新增公告</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="list" stripe border highlight-current-row @selection-change="handleSelectionChange"
            v-loading="loading" height="calc(100% - 96px)">
    <el-table-column type="selection" width="55"/>
    <el-table-column prop="title" label="消息标题"/>
    <el-table-column prop="createdTime" label="创建时间"/>
    <el-table-column prop="updatedTime" label="更新时间"/>
    <el-table-column label="创建人">
      <template #default="scope">
        <span>{{ scope.row.userInfo.trueName }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="queryNoticeDetail(scope.row)">详情</el-button>
        <el-button type="danger" size="small" @click="deleteMessage(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background :total="total"
                 layout="total,sizes,jumper,prev,pager,next"
                 @size-change="handleSizeChange"
                 class="commonPage"
                 @current-change="handleCurrentChange"></el-pagination>
  <notice-info v-model="noticeRequest.visible" v-if="noticeRequest.visible" @save="save"
               :type="noticeRequest.type" :id="noticeRequest.id" :title="noticeRequest.title"></notice-info>
</template>

<script>
import NoticeInfo from '@/views/noticeManage/components/noticeInfo'
import { onBeforeMount, reactive, ref } from 'vue'
import { deleteNoticeByIdsUrl, queryNoticeListUrl } from '@/api/api'
import { post } from '@/utils/httpRequest'
import { ElMessage, ElMessageBox } from 'element-plus'
import { joinList } from '@/utils/util'

export default {
  name: 'noticeManage',
  components: { NoticeInfo },
  setup () {
    const loading = ref(false)
    const total = ref(0)
    const noticeRequest = reactive({
      type: 0,
      title: '',
      visible: false,
      id: 0
    })
    // 新增公告
    const add = () => {
      noticeRequest.id = 0
      noticeRequest.type = 0
      noticeRequest.title = '新增公告'
      noticeRequest.visible = true
    }
    // 公告详情
    const queryNoticeDetail = (row) => {
      noticeRequest.title = '公告详情'
      noticeRequest.type = 2
      noticeRequest.id = row.id
      noticeRequest.visible = true
    }
    const ids = ref([])
    const request = ref({
      pageNum: 1,
      pageSize: 10
    })
    const handleSelectionChange = (rows) => {
      ids.value = joinList(rows, 'id', '', false)
      console.log(ids.value)
    }
    const save = () => {
      ElMessage.success('新增公告成功')
      queryNoticeListAsync()
    }
    const list = ref([])
    const handleSizeChange = (value) => {
      request.value.pageSize = value
      queryNoticeListAsync()
    }
    const handleCurrentChange = (value) => {
      request.value.pageNum = value
      queryNoticeListAsync()
    }
    const queryNoticeListAsync = async () => {
      loading.value = true
      const result = await post(queryNoticeListUrl, request.value)
      if (result.code === 200) {
        list.value = result.data.records
        total.value = result.data.total
      }
      loading.value = false
    }
    const deleteMessage = (rows) => {
      let tempList
      if (rows) {
        tempList = [rows.id]
      } else {
        tempList = ids.value
      }
      ElMessageBox.confirm('确定删除公告？', '提示', {
        type: 'warning'
      }).then(async () => {
        await deleteNotice(tempList)
      })
    }
    const deleteNotice = async (tempList) => {
      const result = await post(deleteNoticeByIdsUrl, { ids: tempList })
      if (result.code === 200) {
        ElMessage.success('删除成功')
        await queryNoticeListAsync()
      }
    }
    onBeforeMount(() => {
      queryNoticeListAsync()
    })
    return {
      loading,
      noticeRequest,
      queryNoticeDetail,
      ids,
      total,
      deleteMessage,
      handleSelectionChange,
      handleCurrentChange,
      handleSizeChange,
      save,
      add,
      list
    }
  }
}
</script>

<style scoped>

</style>
